<template>
    <div style="width: auto;height: 800px;background-color: mistyrose">
        <div>
            <p style="font-size: 30px;margin-top: 10px;">我的书架</p>
        </div>
        <el-divider></el-divider>
        <div v-if="0===shelfList.length">
            <p style="font-size: 30px">暂无图书</p>
        </div>
        <div v-else>
            <div v-for="(i,index) in shelfList" :key="i.id">
                <div v-for="(y,index) in i.list" :key="y.id">
                    <!--<el-image :src="require('../img/'+i.pic)" style="width: 100px;height: 80px;" />-->
                    <div style="border: 1px solid black;height: 130px;">
                        <div style="float:left;margin-left: 35px;margin-top: 10px">
                            <router-link :to="{path: '/workinfo', query: {id:y.id,tag:y.tag}}"><img
                                :src="require('../img/'+y.pic)" style="width: 70px;height: 100px;"/></router-link>
                        </div>
                        <div style="float: left; margin-top: 20px;margin-left: 30px;">
                            <a @click="work(y)" style="font-size: 25px;border: none" v-text="y.title">标签一</a>
                        </div>
                        <div style="float:left;margin-left: -50px;margin-top: 60px">
                            <span v-text="y.author">标签一</span>
                        </div>
                        <div style="margin-right: 60px;margin-top: 30px">
                            <a @click="chapterA(y)">更新至 {{i.bookNovelChapter.title}}</a>
                        </div>
                        <div style="margin-top: 10px" v-for="m in i.chapterList" :key="m.id">
                            <a @click="chapterB(m)" style="margin-left: -100px;">读至 {{m.title}}</a>
                        </div>

                        <div style="float: right;margin-top: -40px" v-for="(m,index) in i.chapterList" :key="index">
                            <el-button @click="read(m)">继续阅读</el-button>
                            <el-button @click="upd(i)">删除</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'BookShelf',
        data() {
            return {
                id: localStorage.getItem('id'),
                shelfList: null,
                newDate:null,
            }
        },
        created() {
            var aData = new Date();
            this.newDate = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
            this.$http.post("shelf/findByList", {user_id: this.id}).then(response => {
                this.shelfList = response.data;
            })
        },
        methods: {
            work(y) {
                this.$router.replace({name: 'workinfo', query: {id: y.id, tag: y.tag}})
            },
            chapterA(y) {
                this.$http.post("chapter/newList", {novel_id: y.id}).then(response => {
                    if (response.status === 200) {
                        const list = {
                            user_id: localStorage.getItem("id"),//用户id
                            nove_id: y.id,
                            novel_chapter_id: response.data.id,
                            create_time: this.newDate
                        }
                        this.$http.post("state/save", list).then(response => {

                        })
                        this.$router.replace({
                            name: 'read',
                            query:{id: y.id,pageNum: response.data.cid}
                        })
                    }
                })

            },
            chapterB(m) {
                const list = {
                    user_id: localStorage.getItem("id"),
                    nove_id: m.novel_id,
                    novel_chapter_id:  m.id,
                    create_time: this.newDate
                }
                this.$http.post("state/save", list).then(response => {

                })
                this.$router.replace({
                    name: 'read',
                    query: {id: m.novel_id, pageNum: m.cid}
                })
            },
            read(m){
                this.$router.replace({
                    name: 'read',
                    query: {id: m.novel_id, pageNum: m.cid}
                })
            },
            upd(i){
                let status = 0
                this.$http.post("shelf/edit",{status:status,id:i.id}).then(response=>{
                    if(response.data){
                        this.$http.post("state/deleteUid",{user_id:localStorage.getItem("id"),nove_id:i.novel_id}).then(response=>{
                            if(response.status === 200){
                                this.$notify({
                                    title: '成功',
                                    message: '亲爱的小主,图书已从书架移出哦.~',
                                    type: 'success'
                                });
                                location.reload()
                            }
                        })
                    }else{
                        this.$notify({
                            title: '失败',
                            message: '亲爱的小主,移出失败.',
                            type: 'warning'
                        });
                        location.reload()
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
